<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>피카츄 배구</title>
    <meta name="description" content="피카츄 배구 게임" />
    <meta name="author" content="이규태" />

    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="theme-color" content="#FFFFFF" />
    <meta name="apple-mobile-web-app-title" content="Pikachu Volleyball" />
    <link
      rel="apple-touch-icon"
      sizes="192x192"
      href="../resources/assets/images/IDI_PIKAICON-1_gap_filled_192.png"
    />
    <link rel="manifest" href="./manifest.json" />

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="../resources/assets/images/IDI_PIKAICON-0.png"
    />
    <link rel="stylesheet" href="../resources/style.css" />
  </head>
  <body>
    <div id="flex-container">
      <div id="menu-bar">
        <div class="btn-container left">
          <div class="relative-container">
            <button
              type="button"
              id="game-dropdown-btn"
              class="btn dropdown-btn"
            >
              게임
            </button>
            <div id="game-dropdown" class="dropdown">
              <button type="button" id="pause-btn" class="btn">
                <span class="check">&check; </span>일시정지
              </button>
              <button type="button" id="restart-btn" class="btn">
                다시시작
              </button>
            </div>
          </div>
          <div class="relative-container">
            <button
              type="button"
              id="options-dropdown-btn"
              class="btn dropdown-btn"
            >
              설정
            </button>
            <div id="options-dropdown" class="dropdown">
              <div class="relative-container">
                <button
                  type="button"
                  id="bgm-submenu-btn"
                  class="btn submenu-btn"
                >
                  배경음악 &#9654;&#xfe0e;
                </button>
                <div id="bgm-submenu" class="submenu">
                  <button type="button" id="bgm-on-btn" class="btn selected">
                    <span class="check">&check; </span>켜기
                  </button>
                  <button type="button" id="bgm-off-btn" class="btn">
                    <span class="check">&check; </span>끄기
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="sfx-submenu-btn"
                  class="btn submenu-btn"
                >
                  효과음 &#9654;&#xfe0e;
                </button>
                <div id="sfx-submenu" class="submenu">
                  <button type="button" id="stereo-btn" class="btn selected">
                    <span class="check">&check; </span>스테레오
                  </button>
                  <button type="button" id="mono-btn" class="btn">
                    <span class="check">&check; </span>모노
                  </button>
                  <button type="button" id="sfx-off-btn" class="btn">
                    <span class="check">&check; </span>끄기
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="speed-submenu-btn"
                  class="btn submenu-btn"
                >
                  속도 &#9654;&#xfe0e;
                </button>
                <div id="speed-submenu" class="submenu">
                  <button type="button" id="slow-speed-btn" class="btn">
                    <span class="check">&check; </span>느리게
                  </button>
                  <button
                    type="button"
                    id="medium-speed-btn"
                    class="btn selected"
                  >
                    <span class="check">&check; </span>보통
                  </button>
                  <button type="button" id="fast-speed-btn" class="btn">
                    <span class="check">&check; </span>빠르게
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="winning-score-submenu-btn"
                  class="btn submenu-btn"
                >
                  승리점수 &#9654;&#xfe0e;
                </button>
                <div id="winning-score-submenu" class="submenu">
                  <button type="button" id="winning-score-5-btn" class="btn">
                    <span class="check">&check; </span>5점
                  </button>
                  <button type="button" id="winning-score-10-btn" class="btn">
                    <span class="check">&check; </span>10점
                  </button>
                  <button
                    type="button"
                    id="winning-score-15-btn"
                    class="btn selected"
                  >
                    <span class="check">&check; </span>15점
                  </button>
                </div>
              </div>
              <div class="relative-container">
                <button
                  type="button"
                  id="practice-mode-submenu-btn"
                  class="btn submenu-btn"
                >
                  연습모드 &#9654;&#xfe0e;
                </button>
                <div id="practice-mode-submenu" class="submenu">
                  <button type="button" id="practice-mode-on-btn" class="btn">
                    <span class="check">&check; </span>켜기
                  </button>
                  <button
                    type="button"
                    id="practice-mode-off-btn"
                    class="btn selected"
                  >
                    <span class="check">&check; </span>끄기
                  </button>
                </div>
              </div>
              <button type="button" id="reset-to-default-btn" class="btn">
                설정 초기화
              </button>
            </div>
          </div>
          <div class="color-scheme-toggle-switch-container">
            <input
              type="checkbox"
              id="dark-color-scheme-checkbox-1"
              class="toggle-switch dark-color-scheme-checkbox"
            />
            <label for="dark-color-scheme-checkbox-1"></label>
          </div>
        </div>
        <div class="btn-container right">
          <button type="button" id="about-btn" class="btn glow">
            <span class="text-about hidden">게임 소개</span
            ><span class="text-play">게임 시작</span>
          </button>
        </div>
      </div>
      <div class="if-embedded-in-other-website hidden">
        <div class="limit-width">
          타 사이트 상에서 피카츄 배구 웹 버전을 실행하고 있는 것 같습니다. 다음
          주소로 직접 방문하면 광고 없는 쾌적한 환경에서 플레이할 수 있습니다.
          <div class="original-address">
            피카츄 배구 웹 버전 원 주소:<br />
            <a
              href="https://gorisanson.github.io/pikachu-volleyball/ko/"
              target="_blank"
              rel="noopener"
              >https://gorisanson.github.io/pikachu-volleyball/ko/</a
            >
          </div>
          <button type="button" class="btn-in-box">
            <span>닫기</span>
          </button>
        </div>
      </div>
      <div id="game-canvas-container">
        <div class="fade-in-box about" id="about-box">
          <div id="about-box-head">
            <h1>피카츄 배구</h1>
            <p class="languages">
              <a href="../zh/" target="_self">Chinese(中文)</a>
              | <a href="../en/" target="_self">English</a>
              | &check; Korean(한국어)
            </p>
            <p class="p2p-online-version">
              <a
                href="https://gorisanson.github.io/pikachu-volleyball-p2p-online/ko/"
                >P2P 온라인 버전</a
              >도 있습니다.
            </p>
            <p class="original-by">
              원조 피카츄 배구 (対戦ぴかちゅ～　ﾋﾞｰﾁﾊﾞﾚｰ編) 게임은 다음 분들이
              만들었습니다.<br />
              1997 (C)
              <span class="no-wrap">SACHI SOFT / SAWAYAKAN Programmers</span
              ><br />
              1997 (C) <span class="no-wrap">Satoshi Takenouchi</span>
            </p>
            <p class="reverse-engineered-by">
              원조 피카츄 배구 게임을 리버스 엔지니어링하여 웹 버전으로
              만들었습니다.<br />
              웹 버전으로 만든 사람:
              <span class="no-wrap"
                ><a href="https://gorisanson.github.io/">이규태</a></span
              >
            </p>
            <p class="source-code-on">
              소스 코드를
              <a
                href="https://github.com/gorisanson/pikachu-volleyball"
                target="_blank"
                rel="noopener"
                >GitHub</a
              >에서 볼 수 있습니다.
            </p>
            <p class="release-date">공개한 날: 2020-03-26</p>
            <p class="update-history-on">
              <a href="./update-history/" target="_self">업데이트 기록</a>
            </p>
          </div>
          <div class="margin-top limit-width">
            <div class="align-center-horizontally">
              <img
                class="screenshot"
                src="../resources/assets/images/screenshot.png"
                width="1728"
                height="1216"
                alt="Pikachu Volleyball game screenshot"
              />
            </div>
            <p>
              피카츄 배구는 일본에서 1997년에 만들어진 윈도우용 게임입니다. 이
              게임을 처음 접한 건 아마 초등학교 컴퓨터실에서였던 것으로
              기억합니다. 친구들과 같이하면 정말 재미있지요. 어떤 분이 일본어
              스프라이트를 한국어로 번역한 '피카츄 버전 한글판'이 나오기도
              했습니다. (이 '피카츄 버전 한글판'의 한국어 스프라이트를 이 한국어
              웹 버전에서도 사용했습니다.)
            </p>
            <p>
              이 웹 버전은 원조 피카츄 배구 게임을 리버스 엔지니어링하여 이를
              자바스크립트 코드로 구현한 것입니다. 이 웹 버전 게임은 웹 브라우저
              상에서 직접 돌아가기 때문에 컴퓨터 운영체제에 상관 없이 플레이할
              수 있습니다.
            </p>
            <p class="margin-top"><span class="thick">조작법:</span></p>
            <div class="align-center-horizontally">
              <img
                class="controls"
                src="../resources/assets/images/controls_ko.png"
                width="1920"
                height="984"
                alt="game controls"
              />
              <p>
                블루투스 키보드를 연결하면 스마트폰이나 태블릿에서도 플레이할 수
                있습니다.
              </p>
            </div>
            <p class="margin-top">
              <span class="thick">팁 1:</span><br />
              원조 게임에서도 그랬듯이,
              <span class="no_wrap">"혼자서재미있게~"</span>를 선택할 때 "Z"
              키를 눌러서 선택하면, 왼쪽 피카츄(1P)를 선택하여 컴퓨터와 플레이할
              수 있습니다. 엔터(Enter) 키를 눌러서 선택하면, 오른쪽 피카츄(2P)를
              선택하여 컴퓨터와 플레이할 수 있고요.
            </p>
            <p class="margin-top">
              <span class="thick">팁 2:</span><br />
              왼쪽 피카츄(1P)의 경우 아래 방향키로 "V" 키가 추가로 있습니다. "V"
              키는 "F" 키와 작동 방식에 차이가 있으므로, 직접 사용해볼 수
              있습니다. (<span class="no-wrap"
                ><a
                  href="https://twitter.com/repeat_c/status/1256494157884841984"
                  target="_blank"
                  rel="noopener"
                  >@repeat_c님의 제보</a
                ></span
              >
              덕분에, 원조 게임의 이 특성을 이 웹 버전에 반영할 수 있었습니다.)
            </p>
            <p class="margin-top">
              <span class="thick">팁 3:</span><br />
              메뉴 바를 숨기려면 (또는 다시 보이게 하려면), Esc 키를 누르면
              됩니다.
            </p>
            <p class="margin-top">
              <span class="thick">팁 4:</span><br />
              원조 피카츄 배구에는 없는 "연습모드"를 추가했습니다.
              <span class="no_wrap">"설정 &rarr; 연습모드 &rarr; 켜기"</span>를
              누르면 활성화가 됩니다.
            </p>
            <p class="margin-top">
              <span class="thick">팁 5:</span><br />
              인터넷 연결 없이도 게임을 플레이 하고 싶은 경우에는 이 페이지를
              앱으로 설치하면 됩니다. 컴퓨터에서는
              <a
                href="https://support.google.com/chrome/answer/9658361"
                target="_blank"
                rel="noopener"
                >크롬 브라우저를 이용해 설치</a
              >할 수 있습니다. 스마트폰이나 태블릿에서는 이 페이지를 "홈 화면에
              추가"하면 됩니다.
            </p>
            <div class="margin-top">
              <button
                type="button"
                id="close-about-btn"
                class="btn-in-box glow"
              >
                <span class="text-close hidden">닫기</span
                ><span class="text-play">게임 시작</span>
              </button>
            </div>
            <div class="for-margin"></div>
          </div>
        </div>
        <div class="fade-in-box notice hidden" id="notice-box-1">
          <p>
            승리점수를
            <span id="winning-score-in-notice-box-1"></span>점으로 바꿀 수
            없습니다. 이미 이 점수가 됐거나 넘어버렸습니다.
          </p>
          <button type="button" id="notice-ok-btn-1" class="btn-in-box">
            알겠어요
          </button>
        </div>
        <div class="fade-in-box notice hidden" id="notice-box-2">
          <p>
            연습모드에서 승리점수를 바꾸는 건 의미가 없습니다.<br />
            연습모드를 끄려면
            <span class="no_wrap">"설정 &rarr; 연습모드 &rarr; 끄기"</span>를
            눌러주세요.
          </p>
          <button type="button" id="notice-ok-btn-2" class="btn-in-box">
            알겠어요
          </button>
        </div>
        <div class="fade-in-box loading hidden" id="loading-box">
          <div>
            <p>게임 스프라이트/사운드 로드 중...</p>
            <div id="progress-bar-border">
              <div id="progress-bar" style="width: 0%"></div>
            </div>
          </div>
        </div>
        <div
          class="fade-in-box update hidden"
          id="update-notification-message-box"
        >
          새 버전이 나왔습니다. 지금 업데이트할까요?
          <div>
            <button type="button" class="update" id="update-now">
              지금 업데이트 (게임 상태가 초기화됩니다)
            </button>
            <button type="button" class="update" id="later">
              나중에 (브라우저 다시 켤 때 자동 업데이트)
            </button>
          </div>
        </div>
      </div>
    </div>
    <script type="module">
      /*
       * Register service worker with some configuration for service worker update notice.
       * Major parts of the code below are copied from: https://developers.google.com/web/tools/workbox/guides/advanced-recipes
       */
      import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-window.prod.mjs';

      function createUpdateUIPrompt(callback) {
        const notificationBox = document.getElementById(
          'update-notification-message-box'
        );
        const elementList = document.getElementsByClassName('fade-in-box');
        const updateNowButton = document.getElementById('update-now');
        const laterButton = document.getElementById('later');

        updateNowButton.addEventListener('click', function () {
          notificationBox.classList.add('hidden');
          callback.onAccept();
        });
        laterButton.addEventListener('click', function () {
          notificationBox.classList.add('hidden');
        });

        for (const element of elementList) {
          element.classList.add('hidden');
        }
        notificationBox.classList.remove('hidden');
      }

      if ('serviceWorker' in navigator) {
        const wb = new Workbox('../sw.js');
        // Add an event listener to detect when the registered
        // service worker has installed but is waiting to activate.
        wb.addEventListener('waiting', (event) => {
          const prompt = createUpdateUIPrompt({
            onAccept: async () => {
              // Assuming the user accepted the update, set up a listener
              // that will reload the page as soon as the previously waiting
              // service worker has taken control.
              wb.addEventListener('controlling', (event) => {
                window.location.reload();
              });
              // Send a message telling the service worker to skip waiting.
              // This will trigger the `controlling` event handler above.
              wb.messageSW({ type: 'SKIP_WAITING' });
            },
          });
        });

        wb.register();
      }
    </script>
  </body>
</html>
